<template>
	<view class="home">
		<!-- 顶部Banner -->
		<view class="banner-img-wrap">
			<image class="banner-img" src="/static/joyman_banner.jpg" mode="widthFix"></image>
		</view>

		<!-- 点单方式 -->
		<view class="order-type">
			<view class="order-type-item" @click="handleMenuClick">
				<view class="service-icon">🍺</view>
				<view class="order-title">堂食</view>
				<view class="order-subtitle">DINE IN</view>
			</view>
			<view class="order-type-item" @click="handleMenuClick">
				<view class="service-icon">🛵</view>
				<view class="order-title">外卖</view>
				<view class="order-subtitle">TAKEOUT</view>
			</view>
			<view class="order-type-item" @click="handleMenuClick">
				<view class="service-icon">📦</view>
				<view class="order-title">自取</view>
				<view class="order-subtitle">SELF-SERVICE</view>
			</view>
		</view>

		<!-- 菜单分类 -->
		<view class="menu-category">
			<view class="category-title">
				<image src="/static/Bars.png" class="category-icon"></image>
				菜单分类
			</view>
			<view class="category-list">
				<view class="category-card beer">
					<view class="category-card-title">啤酒</view>
					<view class="category-card-en">BEER</view>
				</view>
				<view class="category-card wine">
					<view class="category-card-title">洋酒</view>
					<view class="category-card-en">IMPORTED WINES AND LIQUORS</view>
				</view>
			</view>
		</view>

		<!-- 会员详情 -->
		<view class="member-info">
			<view class="member-title">
				<image src="/static/vip.png" class="category-icon"></image>
				会员详情
			</view>
			<view class="member-detail">
				<view class="member-item">
					<view class="member-label">余额(元)</view>
					<view class="member-value">0</view>
				</view>
				<view class="member-item">
					<view class="member-label">卡券</view>
					<view class="member-value">0</view>
				</view>
				<view class="member-item">
					<view class="member-label">积分</view>
					<view class="member-value">0</view>
				</view>
				<view class="member-item">
					<image src="/static/qrcode.png" class="qrcode-icon"></image>
					<view class="member-label">会员码</view>
				</view>
			</view>
		</view>

		<!-- 今日推荐 -->
		<view class="recommend-section">
			<view class="recommend-title">
				<image src="/static/recommend.png" class="category-icon"></image>
				今日推荐
			</view>
			<scroll-view scroll-x class="recommend-list">
				<view class="recommend-card" v-for="item in recommendList" :key="item.id">
					<image :src="item.img" class="recommend-img"></image>
					<view class="recommend-name">{{ item.name }}</view>
					<view class="recommend-price">￥{{ item.price }}</view>
				</view>
			</scroll-view>
		</view>

		<!-- 悬浮客服按钮（可选） -->
		<view class="floating-button" @click="contactService">
			<image src="/static/service.png" mode="" style="width: 45rpx;height: 45rpx;"></image>
		</view>

		<!-- 底部导航栏 -->
		<view class="bottom-nav">
			<view class="nav-item active" @click="navigateTo('/pages/index/index')">
				<text class="icon">🏠</text>
				<text class="nav-text">首页</text>
			</view>
			<view class="nav-item" @click="navigateTo('/pages/menu/menu')">
				<text class="icon">🍸</text>
				<text class="nav-text">点单</text>
			</view>
			<view class="nav-item" @click="navigateTo('/pages/profile/profile')">
				<text class="icon">👤</text>
				<text class="nav-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabIndex: 0,
			recommendList: [
				{ id: 1, name: '精酿啤酒', price: 28, img: '/static/beer1.png' },
				{ id: 2, name: '威士忌', price: 58, img: '/static/whisky.png' }
			]
		};
	},
	methods: {
    handleMenuClick(type) {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      });
    },
		onTabChange(index) {
			this.tabIndex = index;
			// 跳转逻辑
		},
		navigateTo(url) {
			uni.reLaunch({
				url: url
			});
		},
		contactService() {
			uni.showToast({
				title: '客服功能待开发',
				icon: 'none'
			});
		}
	}
};
</script>

<style scoped>
.home {
	background: #fff;
	min-height: 100vh;
}

.banner-img-wrap {
	width: 100vw;
	overflow: hidden;
}

.banner-img {
	width: 100vw;
	display: block;
}

.order-type {
	display: flex;
	justify-content: space-around;
	margin: 30rpx 0;
}

.order-type-item {
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	width: 180rpx;
	height: 180rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.order-icon {
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 10rpx;
}

.order-title {
	font-size: 32rpx;
	font-weight: bold;
}

.order-subtitle {
	font-size: 20rpx;
	color: #888;
}

.menu-category {
	margin: 30rpx 20rpx 0 20rpx;
}

.category-title {
	font-size: 28rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}

.category-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 10rpx;
}

.category-list {
	display: flex;
	gap: 20rpx;
}

.category-card {
	flex: 1;
	background: #8b3a2f;
	color: #fff;
	border-radius: 20rpx;
	padding: 40rpx 0;
	text-align: center;
}

.category-card-title {
	font-size: 36rpx;
	font-weight: bold;
}

.category-card-en {
	font-size: 18rpx;
	margin-top: 10rpx;
	color: #f5e6d8;
}

/* 悬浮客服按钮 */
.floating-button {
	position: fixed;
	bottom: 80px;
	right: 20px;
	width: 50px;
	height: 50px;
	background: #666;
	border-radius: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 100;
}

.floating-button .service-icon {
	color: #fff;
	font-size: 28px;
}

.member-info {
	margin: 30rpx 20rpx 0 20rpx;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	padding: 20rpx;
}

.member-title {
	font-size: 28rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.member-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.member-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.member-label {
	font-size: 20rpx;
	color: #888;
}

.member-value {
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 8rpx;
}

.qrcode-icon {
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 4rpx;
}

.recommend-section {
	margin: 30rpx 20rpx 0 20rpx;
}

.recommend-title {
	font-size: 28rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.recommend-list {
	display: flex;
	flex-direction: row;
	gap: 20rpx;
}

.recommend-card {
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	width: 180rpx;
	padding: 20rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.recommend-img {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.recommend-name {
	font-size: 22rpx;
	font-weight: bold;
}

.recommend-price {
	font-size: 20rpx;
	color: #8b3a2f;
	margin-top: 6rpx;
}

/* 底部导航栏样式 */
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	background-color: #fff;
	border-top: 1rpx solid #eee;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
}

.nav-item .icon {
	font-size: 48rpx;
	color: #666;
	margin-bottom: 8rpx;
}

.nav-item.active .icon {
	color: #d32f2f;
}

.nav-text {
	font-size: 24rpx;
	color: #666;
}

.nav-item.active .nav-text {
	color: #d32f2f;
}
</style>
